<template>
    <h2>侦听器-watch()-api</h2>
    <button @click="a++">a={{a}}</button>
    <button @click="b++">a={{b}}</button>
    <p>{{ab}}</p>
</template>

<script>
    import {ref, watch, watchEffect, reactive, toRefs} from 'vue'

    export default {
        name: "WatchDemo",
        setup() {
            let a = ref(1)
            let b = ref(2)
            let ab = ref('')

            /*
                        watch(() => {
                            //写哪个监听哪个
                            ab.value = a.value + '-------' + b.value
                        })
            */
            //指定监听，还可以用数组
            watch(a, (newA, oldA) => {
                ab.value = newA + '-------' + oldA
            }, {immediate: true})//初值触发，默认为不触发
            /*
                        watchEffect(() => {
                            //写哪个监听哪个
                            ab.value = a.value + '-------' + b.value
                        })
            */

            const user = reactive({
                name: 'a',
                age: 2
            })
            watchEffect(() => {
            })
            return {
                a, b, ab,
                ...toRefs(user)
            }
        }
    }
</script>

<style scoped>

</style>
